<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多选下拉列移动选项</title>
    <script>
        function move(fromId, toId) {
            let fromChild = document.getElementById(fromId);
            let toChild = document.getElementById(toId);

            // 遍历fromChild中所有的Option
            // for(let i = 0; i < fromChild.length; i++){
            for (let i = fromChild.length - 1; i >= 0; i--) {
                // 取出当前遍历的Option对象
                let op = fromChild.options[i];
                // 如果当前Option对象的selected值为true
                // 表示当前选项处于选中状态
                if (op.selected) {
                    // 将当前选项移动到toChild中
                    // 即:在toChild中追加一个选项,该选项即为当前选项
                    // 由于op只有一个,当op赋值给toChild之后,当前fromChild中的自动移除
                    toChild[toChild.length] = op;
                }
            }
        }

        function moveAll(fromId, toId) {
            let fromChild = document.getElementById(fromId);
            let toChild = document.getElementById(toId);

            for (let i = fromChild.length - 1; i >= 0; i--) {
                let op = fromChild.options[i];
                toChild[toChild.length] = op;
            }
        }
    </script>
</head>
<body>
<table>
    <tr>
        <td>
            <select id="s1" multiple style="width: 100px;height: 130px;">
                <option value="1">孙尚香</option>
                <option value="2">瑶</option>
                <option value="3">李白</option>
                <option value="4">貂蝉</option>
                <option value="5">吕布</option>
            </select>
        </td>
        <td>
            <button onclick="move('s1','s2')">&nbsp;--></button>
            <br>
            <button onclick="moveAll('s1','s2')">->></button>
            <br>
            <button onclick="move('s2','s1')"><--&nbsp;</button>
            <br>
            <button onclick="moveAll('s2','s1')"><<-</button>
            <br>
        </td>
        <td>
            <select id="s2" multiple style="width: 100px;height: 130px;">
            </select>
        </td>
    </tr>
</table>
</body>
</html>